import {
    getHospitalFromId,
    getLoginUser, getWorkInfoFromId
} from "../utils/common_network.js";

export default {
    props: {
        id: String
    },
    setup(props) {
        const hospital = Vue.ref({name: "医院名称"});
        const workInfo = Vue.ref({});

        Vue.onMounted(() => {
            getHospitalFromId(props.id, hospital);
            getWorkInfoFromId(props.id, workInfo);
        });

        const workInfoList = Vue.computed({
            get() {
                let result = {};
                result[Symbol.iterator] =
                    function* () {
                        for (let i in workInfo.value) {
                            let m = 0;
                            for (let j in workInfo.value[i]) {
                                const v = workInfo.value[i][j];
                                console.log(v);
                                const dpname = v['1'][0]['departmentName'];
                                const dname = v['1'][0]['doctorName'];
                                let rowspan = 1;
                                let first = false;
                                if (m === 0) {
                                    let length = 0;
                                    for (let _ in workInfo.value[i]) {
                                        length += 1;
                                    }
                                    rowspan = length;
                                    // console.log(length);
                                    first = true;
                                }
                                m += 1;
                                yield {dpname, dname, v, rowspan, first};
                            }
                        }
                        return {done: true};
                    };
                return result;
            }
        });

        function getOrDefaultWorkTime(v, index) {
            const r = v[index];
            if (r === undefined) {
                return [];
            }
            return r;
        }

        const router = VueRouter.useRouter();

        function onRegisterClick() {
            router.push({path: '/register/' + props.id});
        }

        function onDepartmentInfoClick() {
            router.push({path: '/user_main/' + props.id});
        }

        function onAskClick() {

        }

        function onBackClick() {
            router.go(-1);
        }

        return {
            hospital, workInfo, workInfoList, getOrDefaultWorkTime,
            onRegisterClick, onDepartmentInfoClick, onAskClick,
            onBackClick,
        }
    },
    template: `<div class="container">
    <div class="row" style="height: 180px;">
        <div class="col-md-12" style="height: 100%; padding-left: 0; padding-right: 0;">
            <div style="width: 100%; height: 100%; font-size: 36px; text-align: right; 
                padding-top: 20px; background: url('/images/work_info/title.png');
                background-size: 100%;
                padding-left: 0; margin-right: 0; margin-left: 0; padding-right: 15px;"
                class="my-font">
                {{hospital.name}}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 my-font"
             style="transform: translateY(-60px); padding-bottom: 20px; border: 1px solid; background-color: #ffffff;">
            <div style="margin-top: 10px; font-size: 16px; color: #929292;">
                首页 | 患者服务
            </div>
            <div style="font-size: 24px; padding-top: 60px; padding-left: 10px; border-bottom: 1px solid;
            cursor: pointer;" @click="onRegisterClick">
                预约挂号
                <img style="height: 20px; width: 20px; float: right; margin-top: 5px;"
                 src="/images/work_info/link.png" alt="">
            </div>
            <div style="font-size: 24px; padding-top: 20px; padding-left: 10px; border-bottom: 1px solid;
            cursor: pointer;" @click="onDepartmentInfoClick">
                科室导航
                <img style="height: 20px; width: 20px; float: right; margin-top: 5px;"
                 src="/images/work_info/link.png" alt="">
            </div>
            <div style="font-size: 24px; padding-top: 20px; padding-left: 10px; border-bottom: 1px solid;
            cursor: pointer;" @click="onAskClick">
                健康咨询
                <img style="height: 20px; width: 20px; float: right; margin-top: 5px;"
                 src="/images/work_info/link.png" alt="">
            </div>
            <img style="width: 30px; height: 30px;float: right;margin-top: 70px;cursor: pointer;"
                @click="onBackClick" src="/images/exit_images/exit2.svg" alt="">
        </div>
        <div class="col-md-9" style="border: 1px solid black;">
            <div style="font-size: 30px; margin-left: 80px; margin-top: 25px;" class="my-font">
                普通门诊
            </div>
            <div style="margin-left: 80px; margin-top: 15px; font-size: 12px;" class="nss-font">
                1、**医院普通门诊上午开诊时间为8：00，下午开诊时间为1：00。
                <br>2、此为开诊初期安排，后期将根据情况进行调整，可通过医院官网查看
            </div>
            <table style="width: 100%; font-size: 18px;text-align: center;margin-top: 15px;
                margin-bottom: 20px;"
                class="my-table nss-font">
                <thead>
                    <tr>
                        <td>门诊名称</td>
                        <td>医生名称</td>
                        <td>周一</td>
                        <td>周二</td>
                        <td>周三</td>
                        <td>周四</td>
                        <td>周五</td>
                        <td>周六</td>
                        <td>周日</td>
                    </tr>
                </thead>
                <tbody>
<!--                    {{workInfoList}}-->
                    <tr v-for="(item, index) in workInfoList">
<!--                        <td>{{item}}</td>-->
                        <td :rowspan="item.rowspan" v-if="item.first">{{item['dpname']}}</td>
                        <td>{{item['dname']}}</td>
                        <td v-for="day in [1,2,3,4,5,6,7]">
                            <div v-for="(item3, index3) in 
                            getOrDefaultWorkTime(item['v'], day)" style="font-size: 14px;">
                                {{item3['startTime'].substring(0,5)}}-{{item3['endTime'].substring(0,5)}}
                                <br>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<component is="style">
    @import "../../css/table.css";
</component>
`
}